import { useNavigation } from "@react-navigation/native";
import type { StackNavigationProp } from "@react-navigation/stack";
import {
  Canvas,
  Image,
  useCanvasRef,
  useImage,
} from "@shopify/react-native-skia";
import { Dimensions, Share, View } from "react-native";

// 检查文件路径是否正确，确保 zurich.jpg 文件存在于 assets 目录下
import zurich from "../../assets/zurich.jpg";
import { GestureHandler } from "./GestureHandler"; // 导入手势处理组件
import { ModalButton } from "./ModalButton"; // 导入弹出框按钮组件
import { ShareButton } from "./ShareButton"; // 导入分享按钮组件
import { useStickerContext } from "./StickerContext"; // 导入贴纸上下文
const { width, height } = Dimensions.get("window"); // 获取屏幕宽高
const iconSize = 64; // 图标的大小

export const Instagram = () => {
  const ref = useCanvasRef(); // 创建画布的引用
  const { stickers } = useStickerContext(); // 获取贴纸数据
  const { navigate } = useNavigation<StackNavigationProp<any>>(); // 获取导航功能
  const image = useImage(zurich); // 加载 zurich 图片
  if (!image) {
    return null; // 如果图片未加载完成，则返回空组件
  }
  return (
    <View style={{ flex: 1 }}>
      <Canvas style={{ flex: 1 }} ref={ref}>
        <Image
          image={image} // 在画布上绘制加载的图片
          x={0} // 图片的x坐标
          y={0} // 图片的y坐标
          width={width} // 图片的宽度
          height={height} // 图片的高度
          fit="cover" // 图片的填充模式
        />
        {stickers.map(({ Sticker, matrix }, index) => {
          // 遍历并绘制每个贴纸
          return <Sticker key={index} matrix={matrix} />;
        })}
      </Canvas>
      {stickers.map(({ size, matrix }, index) => {
        // 为每个贴纸添加手势控制组件
        return <GestureHandler key={index} matrix={matrix} size={size} />;
      })}
      <ModalButton size={iconSize} onPress={() => navigate("StickerModal")} />
      <ShareButton
        size={iconSize}
        onPress={() => {
          const img = ref.current!.makeImageSnapshot().encodeToBase64(); // 获取画布快照并转换为base64格式
          const data = `data:image/png;base64,${img}`; // 构建分享的图片数据
          Share.share({ url: data }); // 调用分享功能
        }}
      />
    </View>
  );
};
